<template>
  <div class="anaLyse">
    <div class="header">
      <span>舆情分析</span>
      <div class="header_father">
        <div class="header_father_son">
          <div class="header_father_son_content">
            <!-- <h1>访问总人次</h1>
            <h2>5,670</h2> -->
            <a-statistic
              title="访问总人次"
              :value="15670"
              show-group-separator
              animation
            />
            <p>
              <span>较昨日&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span class="newIncrease">206.32↑</span>
            </p>
          </div>
          <div class="header_father_son_echarts" ref="eachrtsRef1"></div>
        </div>
        <div class="header_father_son">
          <div class="header_father_son_content">
            <a-statistic
              title="内容发布量"
              :value="7777"
              show-group-separator
              animation
            />
            <p>
              <span>较昨日&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span class="newIncrease">206.32↑</span>
            </p>
          </div>
          <div class="header_father_son_echarts" ref="eachrtsRef2"></div>
        </div>
        <div class="header_father_son">
          <div class="header_father_son_content">
            <a-statistic
              title="评论总量"
              :value="7568"
              show-group-separator
              animation
            />
            <p>
              <span>较昨日&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span class="newIncrease">206.32↑</span>
            </p>
          </div>
          <div class="header_father_son_echarts" ref="eachrtsRef3"></div>
        </div>
        <div class="header_father_son">
          <div class="header_father_son_content">
            <a-statistic
              title="分享总量"
              :value="4396"
              show-group-separator
              animation
            />
            <p>
              <span>较昨日&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span class="newIncrease">206.32↑</span>
            </p>
          </div>
          <div class="header_father_son_echarts" ref="eachrtsRef4"></div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="body_left">
        <div class="body_left_title">
          <span>内容发布柱状图</span>
          <a-button type="text">查看更多</a-button>
        </div>
        <div class="body_left_body" ref="leftBodyRef"></div>
      </div>
      <div class="body_right">
        <div class="body_right_title">
          <span>内容发布饼状图</span>
          <a-button type="text">查看更多</a-button>
        </div>
        <div class="body_right_body" ref="rightBodyRef"></div>
      </div>
    </div>
    <div class="footer">
      <span>内容时段分析</span>
      <div class="footer_main" ref="footerRef"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import { BarChart, PieChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  MarkPointComponent,
  MarkLineComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent,
  MarkPointComponent,
  MarkLineComponent,
]);

export default {
  mounted() {
    const ContentLeft = echarts.init(this.$refs.leftBodyRef);
    ContentLeft.setOption({
      xAxis: {
        data: [
          "0:00",
          "2:00",
          "4:00",
          "6:00",
          "8:00",
          "10:00",
          "12:00",
          "14:00",
          "16:00",
          "18:00",
          "20:00",
          "22:00",
        ],
      },
      yAxis: [
        {
          type: "value",
        },
      ],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
        showContent: true,
      },
      legend: {
        show: true,
        icon: "circle",
        bottom: "5%",
      },
      series: [
        {
          name: "纯文本",
          type: "bar",
          stack: "Ad",
          barWidth: 20,
          data: [
            5000, 5100, 5050, 6000, 6500, 6060, 7000, 7500, 5000, 8000, 8500,
            6500,
          ],
          itemStyle: {
            color: "blue",
          },
        },
        {
          name: "图文类",
          type: "bar",
          stack: "Ad",
          data: [
            5000, 6000, 7500, 5000, 6500, 6060, 7000, 8000, 8500, 6500, 5100,
            5050,
          ],
          itemStyle: {
            color: "#0080ff",
          },
        },
        {
          name: "视频类",
          type: "bar",
          stack: "Ad",
          data: [
            7000, 7500, 5000, 8000, 8500, 6500, 5000, 5100, 5050, 6000, 6500,
            6060,
          ],
          itemStyle: {
            color: "skyblue",
          },
        },
      ],
    });
    const ContentRight = echarts.init(this.$refs.rightBodyRef);
    ContentRight.setOption({
      legend: {
        show: true,
        icon: "circle",
        left: "left",
        orient: "verical",
      },
      tooltip: {
        trgger: "item",
      },
      series: [
        {
          name: "内容发布比例",
          type: "pie",
          radius: "50%",
          data: [
            { value: 3045, name: "纯文本" },
            { value: 5025, name: "视频类" },
            { value: 2168, name: "图文类" },
            { value: 3549, name: "音频类" },
            { value: 4538, name: "专栏" },
          ],
          label: {
            show: true,
          },
        },
      ],
    });
    const ContentFooter = echarts.init(this.$refs.footerRef);
    ContentFooter.setOption({
      xAxis: {
        type: "category",
        data: [
          "0:00",
          "2:00",
          "4:00",
          "6:00",
          "8:00",
          "10:00",
          "12:00",
          "14:00",
          "16:00",
          "18:00",
          "20:00",
          "22:00",
        ],
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
        showContent: true,
      },
      yAxis: {
        type: "value",
      },
      legend: {
        show: true,
        icon: "circle",
        bottom: "5%",
      },
      series: [
        {
          name: "纯文本",
          data: [
            4000, 4100, 4050, 5000, 5500, 5060, 6000, 3500, 4000, 2000, 6500,
            5500,
          ],
          type: "line",
          smooth: true,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          name: "图文类",
          data: [
            4000, 2000, 5500, 3000, 1500, 3060, 2000, 5000, 4500, 3500, 2100,
            2050,
          ],
          type: "line",
          smooth: true,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          name: "视频类",
          data: [
            7000, 7500, 2500, 8000, 9500, 2500, 5000, 6100, 5050, 4000, 6500,
            6060,
          ],
          type: "line",
          smooth: true,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
      ],
    });
    const ContentSon1 = echarts.init(this.$refs.eachrtsRef1);
    ContentSon1.setOption({
      xAxis: {
        type: "category",
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
        show: false,
      },
      yAxis: {
        type: "value",
        show: false,
      },
      series: [
        {
          name: "123",
          data: [2, 15, 7, 18, 10, 15, 9, 20, 12, 3],
          type: "line",
          smooth: true,
        },
      ],
    });
    const ContentSon2 = echarts.init(this.$refs.eachrtsRef2);
    ContentSon2.setOption({
      xAxis: {
        type: "category",
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
        show: false,
      },
      yAxis: {
        type: "value",
        show: false,
      },
      series: [
        {
          name: "123",
          data: [2, 15, 7, 18, 10, 15, 9, 20, 12, 3],
          type: "bar",
        },
      ],
    });
    const ContentSon3 = echarts.init(this.$refs.eachrtsRef3);
    ContentSon3.setOption({
      series: [
        {
          name: "123",
          radius: ["40%", "70%"],
          data: [
            { value: 12, name: "111" },
            { value: 15, name: "222" },
            { value: 7, name: "333" },
            { value: 18, name: "444" },
          ],
          type: "pie",
          label: {
            show: false,
          },
        },
      ],
    });
    const ContentSon4 = echarts.init(this.$refs.eachrtsRef4);
    ContentSon4.setOption({
      xAxis: {
        type: "category",
        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
        show: false,
      },
      yAxis: {
        type: "value",
        show: false,
      },
      series: [
        {
          name: "123",
          data: [12, 15, 27, 38, 20, 35, 19, 20, 12, 33],
          type: "bar",
          itemStyle: {
            color: "orange",
          },
        },
      ],
    });
  },
};
</script>
<style scoped lang="scss">
.anaLyse {
  width: 100%;
  min-width: 1100px;
}
.header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: space-between;
  padding: 20px 10px 10px 10px;
  background: #fff;
  box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.2);
  span {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
  }
  &_father {
    display: flex;
    justify-content: space-between;
    &_son {
      width: 260px;
      height: 134px;
      background: linear-gradient(
        rgb(245, 254, 242) 0%,
        rgb(230, 254, 238) 100%
      );
      display: flex;
      align-items: center;

      &_content {
        width: 130px;
        height: 134px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 10px;

        p {
          span {
            float: left;
            font-size: 12px;
          }
          .newIncrease {
            color: red;
          }
        }
      }
      &_echarts {
        width: 130px;
        padding: 0;
        height: 80px;
      }
    }
  }
}
.body {
  width: 100%;
  height: 425px;
  background: #fff;
  box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.2);
  padding: 20px 10px 10px 10px;
  display: flex;
  justify-content: space-between;
  margin: 20px 0 20px;
  &_left {
    width: 720px;
    height: 100%;

    &_title {
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 16px;
        font-weight: 700;
      }
    }

    &_body {
      width: 100%;
      height: 370px;
    }
  }
  &_right {
    width: 352px;
    height: 100%;

    &_title {
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-size: 16px;
        font-weight: 700;
      }
    }

    &_body {
      width: 100%;
      height: 370px;
    }
  }
}
.footer {
  width: 100%;
  height: 450px;
  padding: 20px 10px 10px 10px;
  background: #fff;
  box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.2);

  span {
    font-size: 16px;
    font-weight: 700;
  }

  &_main {
    width: 100%;
    height: 450px;
  }
}
</style>
